<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  addpathservice, getallbookservice, getpartpathservice,
  updatepathservice, detailbookservice, deletepathservice, lendbookservice, getallbookcategoryservice
} from '@/api/book.js'
import { getpathallservice, getpathlevelallservice } from '@/api/allApi.js'
//控制添加分类弹窗
const dialogVisible = ref(false)
const lenddialogVisible = ref(false)
//分页条数据模型
//const pageNum = ref(1)//当前页
const total = ref(20)//总条数
//const pageSize = ref(3)//每页条数
//文章分类数据模型
const categorys = ref([
])
//用户搜索时选中的分类id
const categoryId = ref('')
const bookcategorylist = async () => {
  let result = await getallbookcategoryservice();
  categorys.value = result.data;
}
bookcategorylist();
//用户搜索时选中的发布状态
const state = ref('')
//定义变量，控制标题
const title = ref('')
//交通路线列表数据模型
const paths = ref([])
const levels = ref([])
//与后端交互的json数据
const pathmodel = ref({
  startPoint: '', //起点
  endPoint: '', //终点
  number: '', //班次
  startTime: null, //出发时间
  endTime: null, //到达时间
  price: '', //费用
  way: '' //交通方式
})

const findmodel = ref({
  pageNum: 1,
  pageSize: 20,
  pathName: '',
  str: ''
})
const pathlist = async () => {
  let result = await getpathallservice();
  paths.value = result.data;
}
pathlist();

const levellist = async () => {
  let result = await getpathlevelallservice(findmodel.value);
  console.log(result);
  levels.value = result.data;
}
levellist();
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  findmodel.value.pageSize = size;
  levellist();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  findmodel.value.pageNum = num;
  levellist();
}
const cleardata = () => {
  findmodel.value.str = ''
}


</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>设施分类年报表</span>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item>
        <span> 城镇道路： </span>
        <el-select placeholder="请选择" v-model="findmodel.pathName" clearable>
          <el-option v-for="c in paths" :key="c" :label="c" :value="c">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="查询条件：">
        <el-input v-model="findmodel.str" placeholder="请输入查询内容" width="200"></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="levellist">搜索</el-button>
        <el-button @click="cleardata">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 文章列表 -->
    <el-table :data="levels" style="width: 100%">
      <el-table-column label="评价日期" prop="finishTime"></el-table-column>
      <el-table-column label="综合评价指数 (PQI)" prop="pqi"></el-table-column>
      <el-table-column label="等级" prop="pqiLevel" width="80"></el-table-column>
      <el-table-column label="平整度 (RQI)" prop="rqi"></el-table-column>
      <el-table-column label="等级" prop="rqiLevel" width="80"> </el-table-column>
      <el-table-column label="破损状况 (PCI)" prop="pci"> </el-table-column>
      <el-table-column label="等级" prop="pciLevel" width="80"> </el-table-column>
      <!-- <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Position" circle plain @click="showlendDialog(row)"></el-button>
                    <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click="del(row)"></el-button>
                </template>
            </el-table-column> -->
      <template #empty>
        <el-empty description="请选择城镇道路查看道路技术状况评价结果" />
      </template>
    </el-table>
    <!-- 分页条
    <el-pagination v-model:current-page="findmodel.pageNum" v-model:page-size="findmodel.pageSize"
      :page-sizes="[20, 30, 40, 50]" layout="jumper, total, sizes, prev, pager, next" background :total="total"
      @size-change="onSizeChange" @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end" /> -->
  </el-card>

</template>




<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>